import React, { memo, useState, useEffect, Fragment } from "react";

import FormItem from "../formItem";
import { renderFormItem } from "./render";

const Index = ({ config }) => {
	const [formArr, setFormArr] = useState([]);
	// console.log(config);

	const initBaseForm = config => {
		const baseArr = {
			aBase: {
				title: "",
				borderBottom: 1,
				children: [],
				className: "form-item-base"
			},
			bMarginOrPadding: {
				title: "边距与边框",
				borderBottom: 1,
				children: [],
				className: "form-item-margin"
			},
			cFont: {
				title: "字体",
				borderBottom: 1,
				children: [],
				className: "form-item-font"
			},
			dBackground: {
				title: "背景",
				borderBottom: 1,
				children: [],
				className: "form-item-background"
			},
			eShowOrDisabled: {
				title: "隐藏与禁用",
				borderBottom: 1,
				children: [],
				className: "form-item-display"
			},
			fCustom: {
				title: "其他",
				borderBottom: 0,
				children: [],
				className: "form-item-other"
			}
		};

		const basePropKeys = ["uuid", "x", "y", "w", "h"];
		basePropKeys &&
			basePropKeys.map(key => {
				if (config[key]) {
					baseArr.aBase.children.push(config[key]);
				}
			});

		const marginOrPaddingPropKeys = ["margin", "padding", "border", "zIndex"];
		marginOrPaddingPropKeys &&
			marginOrPaddingPropKeys.map(key => {
				if (config[key]) {
					baseArr.bMarginOrPadding.children.push(config[key]);
				}
			});

		const fontPropKeys = ["fontColor", "fontFamily", "fontSize", "fontWeight", "fontAlign"];
		fontPropKeys &&
			fontPropKeys.map(key => {
				if (config[key]) {
					baseArr.cFont.children.push(config[key]);
				}
			});

		const backgroundPropKeys = ["backgroundColor", "backgroundImage", "opacity"];
		backgroundPropKeys &&
			backgroundPropKeys.map(key => {
				if (config[key]) {
					baseArr.dBackground.children.push(config[key]);
				}
			});

		const showOrDisabledPropKeys = ["hidden", "disabled"];
		showOrDisabledPropKeys &&
			showOrDisabledPropKeys.map(key => {
				if (config[key]) {
					baseArr.eShowOrDisabled.children.push(config[key]);
				}
			});

		// dataSource不在此处显示，此处只显示基本属性
		const ordinaryKeys = basePropKeys
			.concat(marginOrPaddingPropKeys)
			.concat(fontPropKeys)
			.concat(backgroundPropKeys)
			.concat(showOrDisabledPropKeys)
			.concat(["dataSource", "events"]);

		const configKeys = Object.keys(config);
		configKeys &&
			configKeys.map(key => {
				if (ordinaryKeys.indexOf(key) === -1) {
					baseArr.fCustom.children.push(config[key]);
				}
			});

		// console.log(baseArr);
		return baseArr;
	};

	useEffect(() => {
		// 此处是合并组件属性
		const baseArr = initBaseForm(config);
		setFormArr(Object.values(baseArr));
	}, [config]);

	return (
		<>
			{formArr &&
				formArr.map((item, index) => {
					return (
						<Fragment key={index}>
							<FormItem className={item.className} title={item.title} borderBottom={item.borderBottom} hideRow={item?.children?.length === 0}>
								{item.children &&
									item.children.map(cItem => {
										return <Fragment key={cItem.name}>{renderFormItem[cItem.type]?.(cItem)}</Fragment>;
									})}
							</FormItem>
						</Fragment>
					);
				})}
		</>
	);
};

export default memo(Index);
